<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	</head>
	<style>
		html,body{
			background: #f5f5f5;
		}
		.header{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #ccc;	
			position: relative;
			background: #fbfbfb;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/back.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		.header h1{
			font-size: 20px;
		}
		.content{
			background: #fff;
		}
		.w100{
			width:100%;
		}
		.order{
			background: #fff;
			margin-top: 10px;
			height: 50px;
			border-bottom: 1px solid #ccc;	
			border-top:1px solid #ccc ;	
			box-sizing: border-box;
			padding: 5px 0;	
			font-size: 14px;
		}
		.content .order p:nth-of-type(2){
			color: #666;
		}
		.content .order span{
			font-size: 14px;
			color: #f66d00;
		}
		.orderlist{
			padding: 10px 0;
			border-bottom: 1px solid #ccc;		
		}
		.w90{
			width: 90%;
			margin: 0 auto;
		}		
		.orderlist .piclist{
			float: left;
			width: 36px;
			margin-right: 15px;
			height:55px;
		}
		.orderlist .piclist img{
			width:100%;
			background-size:contain;
		}
		.orderlist li:nth-of-type(5){
			line-height: 40px;
			font-size: 14px;
		}
		.orderlist li:last-of-type{
			float: right;			
		}
		.orderlist li span{
			margin-top: 16px;
			display: block;
			width: 20px;
			height: 20px;
			background: url(img/setting_next.png) no-repeat right center;
			background-size: contain;
		}
		.h50{
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			color: #666;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}	
		.h60{
			height: 60px;
			line-height: 60px;
			font-size: 14px;
			color: #666;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}	
		.payment{
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			color: #666;
			border-bottom: 1px solid #ccc;
		}

		.payment .rights{
			margin-top: 5px;
			width: 60px;
			line-height: 20px;
		}
		.coupon{
			margin-top: 10px;
			height: 50px;
			line-height: 50px;
			background: #fff;
		}
		.coupon_icon{
			margin-top: 14px;
			width: 20px;
			vertical-align: middle;
			height: 20px;
			background: url(img/setting_next.png) no-repeat right center;
			background-size: contain;
		}

		.total{
			margin-top: 10px;
			background: #fff;	
			padding: 10px 0;		
		}
		.total p{
			height: 30px;
			line-height: 30px;
			font-size: 14px;
		}
		.switch_btn{
			position: relative;
			width: 5.1em;
			height: 3.1em;
			border-radius: 3.1em;
            text-indent: -999em;
		    overflow: hidden;
		    margin: 0.65em 0;
		    display: block;
		}
		.switch_btn.left{
			box-shadow: none;
		}
		.switch_btn.right{
			box-shadow: 0.1em 0 1em #e4e4e4;
		}
		.switch .left .switch_bg{
			border: 0.1em solid #e4e4e4;
		}
		.switch .right .switch_bg{
			border: 0.1em solid #4cd964;
		}
		.switch .switch_btn .switch_bg{
			width: 4.9em;
		    height: 2.9em;
 		    display: block;
		    border-radius: 2.9em;
		    
		}
		.switch .right .switch_bg em{
			background-color: #4cd964;
		}
		.switch .left i{
			left: 0;
		    background-color: transparent;
		    border: 0.1em solid #e4e4e4;
		    box-shadow: none;
		} 
		.switch .right i {
		    left: 2.0em;
		    background-color: transparent;
		    border: 0.1em solid #4cd964;
		    box-shadow: none;
		}
		.switch .switch_btn i {
		    position: absolute;
		    width: 2.9em;
		    height: 2.9em;
		    background-color: white;
		    border-radius: 2.9em;
		    top: 0;
		    z-index: 6;
		}
		.switch .switch_btn .switch_bg em{
			display: block;
		    width: 100%;
		    height: 100%;
		    border-radius: 2.9em
		}
		.points_con .switch .switch_btn i em {
		    display: block;
		    width: 100%;
		    height: 100%;
		    background-color: #fff;
		    border-radius: 2.9em;
    	}
		.footer{
			border-top: 1px solid #ccc;
			bottom: 0px;
			position: fixed;
			left: 0px;
			font-size: 14px;
		}
		.footer span{
			display: inline-block;
		}
		.footer .price{
			font-weight: bold;
			color: #f66d00;
			font-size: 16px;
			margin-left: 5px;
		}
		.footer .pay span{
			width: 120px;
			height: 40px;
			line-height: 40px;
			background: #f66d00;
			font-size: 16px;
			text-align: center;
			border-radius: 5px;
			color: #fff;
		}
	</style>
	<body>
		<div class="header">
			<h1>订单结算</h1>
			<div class="backicon" onclick="javascript:history.back(-1);"><span></span></div>
		</div>		
		<div class="content">
			<div class="order w100">
				<div class="w90">
					<p><span>订单</span> 悦读网</p>
					<p>共5件，小计<span>¥22.97</span> （免运费）</p>	
				</div>			
			</div>
			<div class="orderlist w100" onclick="location.href = 'liebiao.html';return false;">
				<ul class="clearfix w90">
					<li class="piclist"><img src="img/img1.jpg"/></li>
					<li class="piclist"><img src="img/img2.jpg"/></li>
					<li class="piclist"><img src="img/img3.jpg"/></li>
					<li class="piclist"><img src="img/img4.jpg"/></li>
					<li class="piclist">...</li>
					<li><span></span></li>					
				</ul>	
				
			</div>
			<div class="payment clearfix w100">
				<div class="payment_method w90">
					<span class="fl">送货/付款:</span>
					<div class="rights fr">
						<span>自动发货</span>
						<span>网上支付</span>
					</div>
				</div>
				
			</div>
		</div>
		<div class="coupon h50">
			<div class="w90">
				<span class="fl">优惠券</span>
				<div class="fr">
					<span class="fl">请选择</span>
					<span class="coupon_icon fl"></span>
				</div>
							
			</div>	
		</div>		
		<div class="w100 h60">
			<div class=" w90 clearfix">
				<div class="fl">可用20积分，抵扣¥0.20</div>
				<div class="switch fr">
					<a href="#" class="switch_btn left">
						<span class="switch_bg"><em></em></span>
						<i><em>选择按钮</em></i>
					</a>
				</div>
			</div>			
		</div>
		<div class=" total w100">
			<div class=" w90">
				<p class="clearfix">
					<span class="fl">小计:</span>
					<span class="fr">¥<span class="price1">22.97</span></span>
				</p>
				<p class="clearfix integral" style="display:none"> 
					<span class="fl">积分抵现金:</span>
					<span class="fr">-¥<span class="price2">0.20</span></span>
				</p>
			</div>
		</div>
		
		<div class="footer h50 w100 clearfix">
			<div class=" w90">
				<span class="fl">实付<span class="price">¥<span class="total_price">22.97</span></span></span>
				<div class="fr pay " onclick="location.href = 'pay.html';return false;"><span>去支付</span></div>
			</div>
		</div>
	</body>
	<script>
		$(".switch").click(function(){
			var a=$(".price1").html();
			var b=$(".price2").html();
			if($(this).find("a").hasClass("left")){
				$(this).find("a").removeClass("left").addClass("right");
				$(".integral").show();
				var c=a-b;
				$(".total_price").html(c);
			}else{
				$(this).find("a").removeClass("right").addClass("left");
				$(".integral").hide();
				$(".total_price").html(a);
			}
			
		});
	</script>
</html>
